<!-- 批次信息 -->
<script setup lang="ts">
import {
  NForm,
  NInput,
  NSelect,
  NButton,
  NFormItem,
  NDatePicker,
  NInputNumber,
  NTreeSelect,
  useMessage,
  type SelectOption
} from 'naive-ui'
import { useRoute } from 'vue-router'
import { sendRequest } from '@/utils/api'
import { onMounted, ref, reactive, computed } from 'vue'
import type { BatchDetailModel } from '@/api/batchV2'
import type { DicTreeModel } from '@/api/dic'
import type { HttpResponse } from '@/utils/http'
import useRouteQuery from '@/hooks/useRouteQuery'
import FileList from '@/components/FileList.vue'
const props = defineProps({
  id: String
})
const route = useRoute()
const message = useMessage()
const clueSelectOptions = ref<SelectOption[]>([])
const clueSelectLoading = ref(false)
const queryClueSelectOptions = async () => {
  clueSelectLoading.value = true
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'batchV2',
      api: 'clueList'
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueSelectOptions.value = res.data
  } catch (error) {
    console.error(error)
  } finally {
    clueSelectLoading.value = false
  }
}

const clueMethodOptions = reactive<DicTreeModel[]>([])
const clueMethodLoading = ref(false)
const queryClueMethodOptions = async () => {
  clueMethodLoading.value = true
  try {
    const [error, res] = await sendRequest<HttpResponse<DicTreeModel[]>>({
      module: 'dic',
      api: 'getTree',
      override: {
        params: {
          dicCode: 'A30'
        }
      }
    })

    if (error) throw error
    if (res.code !== 0) throw new Error(res.msg)
    clueMethodOptions.length = 0
    clueMethodOptions.push(...(res.data[0] ? res.data[0].children || [] : []))
  } catch (error) {
    console.error(error)
  } finally {
    clueMethodLoading.value = false
  }
}

const batchInfo = ref({} as any)
const isJCDG = computed(() => batchInfo.value.solicitMethodCode === 'A3007')
const fileList = ref<any[]>([])
const queryBatchInfo = async () => {
  const [error, res] = await sendRequest({
    module: 'collectProcess',
    api: 'commonBatchInfo',
    uri: {
      batchCode: props.id
    }
  })
  if (error) return message.error(error.message)
  if (res.data.batchVo) {
    if (res.data.batchVo.endTime) {
      res.data.batchVo.endTime = res.data.batchVo.endTime.slice(0, 10)
    }
    if (res.data.batchVo.startTime) {
      res.data.batchVo.startTime = res.data.batchVo.startTime.slice(0, 10)
    }
    if (res.data.batchVo.solicitNum) {
      res.data.batchVo.solicitNum = Number(res.data.batchVo.solicitNum)
    }
  }
  fileList.value = res.data.batchVo.fileList?.map((e: any, i: number) => {
      const f = new File([e.name], e.name, { type: e.type })
      // @ts-ignore
      f.remoteId = e.id
      return {
        id: i,
        name: e.name,
        file: f,
        status: 'finished',
        url: e.path,
        remoteId: e.id
      }
    }) || []
  batchInfo.value = res.data.batchVo || {}
}
useRouteQuery('id', () => {
  if (route.query.id)  
  queryBatchInfo()
})
onMounted(() => {
  // queryClueSelectOptions()
  // queryClueMethodOptions()
  queryBatchInfo()
})
</script>

<template>
  <!-- <div class="bi-title">批次信息</div> -->
  <DetailFormProvider>
    <NForm
      disabled
      label-placement="left"
      label-width="140rem"
      :show-feedback="false"
      :show-require-mark="false"
      class="bi-card form"
    >
    <NFormItem label="关联线索：">
        <NInput
          :value="batchInfo.clueName"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="批次名称：">
        <NInput
          :value="batchInfo.batchName"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="征集方式：">
        <NInput :value="batchInfo.solicitMethod" />
      </NFormItem>
       <NFormItem label="接收时间：">
        <NDatePicker
          :formatted-value="batchInfo.receiveTime"
          type="datetime"
          placeholder="/"
        />
      </NFormItem>
  <NFormItem label="接收人：">
        <NInput
          :value="batchInfo.receiver"
          placeholder="/"
        />
      </NFormItem>
        <NFormItem label="征集数量：">
        <NInputNumber
          :value="batchInfo.solicitNum"
          placeholder="/"
          :show-button="false"
          :min="0"
          :max="Number.MAX_SAFE_INTEGER"
        />
      </NFormItem>
      <NFormItem label="证书发放：">
        <NInput
          :value="batchInfo.certificateType"
          placeholder="/"
        >
          <template #suffix>
            <NButton
              v-if="batchInfo.certificateType"
              color="#6CB187"
              ghost
              size="small"
              @click="
                $router.push({
                  name: 'DonationCertificateDetail',
                  params: { id: batchInfo.certificateId }
                })
              "
            >
              查看详情
            </NButton>
          </template>
        </NInput>
      </NFormItem>
      <template v-if="isJCDG">
        <NFormItem label="开始时间：">
          <NDatePicker
            :formatted-value="batchInfo.startTime"
            type="date"
            placeholder="/"
          />
        </NFormItem>
        <NFormItem label="结束时间：">
          <NDatePicker
            :formatted-value="batchInfo.endTime"
            type="date"
            placeholder="/"
          />
        </NFormItem>
        <NFormItem label="代存期限：">
          <NInput
            :value="batchInfo.depositPeriod"
            placeholder="/"
          />
        </NFormItem>
      </template>
      
      <NFormItem label="藏家：">
        <NSelect
          :value="batchInfo.collector"
          :options="clueSelectOptions"
          :loading="clueSelectLoading"
          placeholder="/"
        />
      </NFormItem>
       <NFormItem label="移交人：">
        <NInput
          :value="batchInfo.transferor"
          placeholder="/"
          style='margin-right: 10px;width: 350px;'
        />
        <NInput
          v-model:value="batchInfo.transferorPhone"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="创建时间：">
        <NDatePicker
          :formatted-value="batchInfo.createTime"
          type="datetime"
          placeholder="/"
        />
      </NFormItem>

      <NFormItem label="修改时间：">
        <NDatePicker
          :formatted-value="batchInfo.updateTime"
          type="datetime"
          placeholder="/"
        />
      </NFormItem>
      <NFormItem label="鉴定状态：">
        <NInput
          :value="batchInfo.identifyStatus"
          placeholder="/"
        />
      </NFormItem>
    
    
     
      
    
    

     
     


      <!-- <NFormItem label="数量：">
        <NInput
          :value="batchInfo.itemNum"
          placeholder="/"
        />
      </NFormItem> -->
      <NFormItem
        label="备注："
        class="n-form-item--textarea"
      >
        <NInput
          :value="batchInfo.remark"
          type="textarea"
          placeholder="/"
          rows="1"
        />
      </NFormItem>
      <NFormItem
        label="附件："
        label-placement="left"
      >
        <FileList
          :file-list="fileList"
        />
      </NFormItem>
    </NForm>
  </DetailFormProvider>
</template>

<style lang="scss" scoped>
.bi-title {
  font-size: 26rem;
  margin-bottom: 30rem;
  color: #048c5e;
  line-height: 1;
}

.bi-card {
  padding: 20rem;
  background-color: #e1e1e1;

  &.form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16rem 32rem;

    .n-form-item--textarea {
      grid-column: 1 / -1;
    }

    .n-date-picker,
    .n-input-number {
      flex: 1;
    }
  }
}
</style>
